import "./index.scss";
import { RouteLocationMatched } from "vue-router";
import { TransitionGroup } from "vue";
export default defineComponent({
  props: {
    id: {
      type: String,
      default: "",
    },
    class: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const route = useRoute();
    const router = useRouter();
    const levelList = ref<RouteLocationMatched[]>([]);

    const getBreadcrumb = () => {
      // only show routes with meta.title
      let matched = route.matched.filter(
        (item) => item.meta && item.meta.title
      );
      const first = matched[0];
      // 判断是否为首页
      if (!isDashboard(first)) {
        matched = ([{ path: "/index", meta: { title: "首页" } }] as any).concat(
          matched
        );
      }
      levelList.value = matched.filter(
        (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
      );
    };
    const isDashboard = (route: RouteLocationMatched) => {
      const name = route && (route.name as string);
      if (!name) {
        return false;
      }
      return name.trim() === "Index";
    };
    const handleLink = (item: RouteLocationMatched) => {
      const { redirect, path } = item;
      redirect ? router.push(redirect as string) : router.push(path);
    };

    watchEffect(() => {
      // if you go to the redirect page, do not update the breadcrumbs
      if (route.path.startsWith("/redirect/")) return;
      getBreadcrumb();
    });
    onMounted(() => {
      getBreadcrumb();
    });
    return () => (
      <>
        <el-breadcrumb
          class={`app-breadcrumb ${props.class}`}
          separator="/"
          id={props.id}
        >
          <TransitionGroup name="breadcrumb">
            {levelList.value.map((item, index) => (
              <>
                {item.redirect === "noRedirect" ||
                index == levelList.value.length - 1 ? (
                  <span class="no-redirect" key={index}>
                    {item.meta?.title}
                  </span>
                ) : (
                  <a
                    onClick={(event) => {
                      event.stopPropagation();
                      handleLink(item);
                    }}
                    key={index}
                  >
                    {item.meta?.title}
                  </a>
                )}
              </>
            ))}
          </TransitionGroup>
        </el-breadcrumb>
      </>
    );
  },
});
